<template>
  <div class="monitor">
    <!-- 头部 -->
    <div class="monitor_top">
      <ul class="btns">
        <el-button type="success" class="occupy" @click="thisEdit(1, '启用')">启用</el-button>
        <el-button type="danger" class="locking" @click="thisEdit(2, '禁用')">禁用</el-button>
        <!-- <el-button type="primary" class="occupy" @click="intOut()">出库</el-button> -->
      </ul>
      <el-button type="success" style="float:right;" @click="reload()">刷新仓位状态</el-button>
    </div>

    <!-- 仓库图 -->
    <div class="ware" onselectstart="return false">
      <div class="ware_bg" v-for="item in ware" :key="item.id">
        <el-racks :id="item.id" @activeChange="activeChange" :key="timer" />
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { message } from "@/utils/message";
import { wareList, racklocationsUpdateStatus } from '@/utils/api/BasicManagement/warehouse'
import elracks from './components/racks.vue'

let ware = ref([])
let timer = ref(0)
let RackLocationsId = ref(null)
wareList().then(res => {
  ware.value = res.Content.Results
})

function thisEdit(val, name) {
  ElMessageBox.confirm(
    `是否${name}该货位?`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  ).then(() => {
    racklocationsUpdateStatus({ id: RackLocationsId.value, status: val }).then(res => {
      if (res.Code === 0) {
        message(`修改成功`, { type: "success" });
        timer.value = new Date().getTime()
      } else {
        message(res.Message, { type: "error" });
      }
    })
  }).catch(() => { })
}

function intOut() {
  ElMessageBox.confirm(
    `是否确认出库?`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  ).then(() => {
    let data = { storePlaceID: RackLocationsId.value }
    // AppointOut(data).then(res => {
    //   if (res.Code == 0) {
    //     message(`出库成功`, { type: "success" });
    //     timer.value = new Date().getTime()
    //   }
    // })
  }).catch(() => { })
}

// 刷新页面
function reload() {
  timer.value = new Date().getTime()
  message(`刷新成功`, { type: "success" });
}

function activeChange(val) {
  RackLocationsId.value = val
}

</script>

<style lang="scss" scoped>
.monitor {
  background-color: white;
  height: calc(100vh - 144px);
  padding: 20px;
  box-sizing: border-box;
}

.monitor_top {
  .btns {
    list-style: none;
    display: inline-block;
    padding-left: 0;
    margin: 0;
  }
}

.ware::v-deep {
  margin-top: 10px;
  height: calc(100% - 32px);

  .ware_bg {
    height: 100%;
  }

  .el-collapse-item:last-child {
    height: 100%;
  }

  .el-tabs--border-card>.el-tabs__header {
    background: #fdfdfd;
  }

  .el-collapse-item__content {
    height: 100%;
  }

  .el-tabs--border-card {
    border: 1px solid #e4e7ed;
    box-shadow: none;
    border-radius: 3px;
  }

  .el-collapse-item__header {
    font-size: 16px;
    font-weight: 600;
    font-family: 'KaiTi';
  }

  .el-collapse-item__wrap {
    height: calc(100% - 48px);
  }

  i {
    margin-right: 5px;
  }
}

.occupy {
  background: #67c23a;
  border: 0;
}

.deactivate {
  background: #e6a23c;
  border: 0;
}

.locking {
  background: #ff0000;
  border: 0;
}

.artificial {
  background: #409eff;
  border: 0;
}
</style>@/utils/api/BasicManagement/locations